<template>
	<view class="sort yb-flex yb-row yb-align-center padding-gap" :style="{
		'border-bottom-color': skinColor.color_gap_1
	}">
		<yb-scroll-x custom-class="yb-flex-1">
			<view @tap="changeSort(tag)" v-for="(tag, i) in list" :key="i">
				<yb-tag
				:options="{
					bgColor: skinColor.color_gap_1,
					color: value == tag.value ? skinColor.color_actived_1 : skinColor.color_3
				}"
				:style="{
					'margin-right': i == list.length - 1 ? 0 : '15rpx'
				}"
				:value="tag.label"></yb-tag>
			</view>
		</yb-scroll-x>
		<slot name="right">
			<view class="yb-flex yb-row yb-align-center" style="margin-left: 10rpx;" @tap="filterClick" v-if="filter">
				<text class="filter-text" :style="{color: skinColor.color_1}">筛选</text>
				<rd-icon name="type" :size="28" :color="skinColor.color_1"></rd-icon>
			</view>
		</slot>
	</view>
</template>

<script>
	import appMixin from '@/common/mixin/app.js';
	export default {
		mixins: [appMixin],
		props: {
			value: {
				type: [String, Number],
				default: ''
			},
			filterShow: {
				type: Boolean,
				default: false
			},
			filter: {
				type: Boolean,
				default: true
			},
			list: {
				type: Array,
				default: function () {
					return new Array
				}
			}
		},
		methods: {
			changeSort (tag) {
				if ( this.value != tag.value ) {
					this.$emit('input', tag.value)
				}
			},
			filterClick () {
				this.$emit('update:filterShow', !this.filterShow)
			}
		}
	}
</script>

<style>
	.sort {
		border-bottom-width: 1px;
		border-bottom-style: solid;
		padding-bottom: 20rpx;
		height: 70rpx;
	}
	.filter-text {
		font-size: 28rpx;
		margin-right: 5rpx;
	}
</style>